<UserControl
  x:Class="UI.Control.TagsCloud"
  xmlns:control="clr-namespace:UI.Control"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <UserControl.Resources>
    
    <!-- Converter for the fontsize of the tags -->
    <control:CountToFontSizeConverter x:Key="CountToFontSizeConverter"/>

    <Style x:Key="TagsListBox" TargetType="{x:Type ListBox}">
      <Setter Property="SnapsToDevicePixels" Value="true"/>
      <Setter Property="Background" Value="{DynamicResource WindowBackgroundBrush}"/>
      <Setter Property="BorderBrush" Value="{DynamicResource SolidBorderBrush}"/>
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
      <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
      <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type ListBox}">
            <Grid>
              <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
              <ScrollViewer Margin="1" Style="{DynamicResource SimpleScrollViewer}" Focusable="false" Background="{TemplateBinding Background}">

                <!-- Replaced the default StackPanel ItemsHost with a WrapPanel to get the TagCloud layout-->
                <WrapPanel Margin="2" IsItemsHost="true"/>

              </ScrollViewer>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
    
    <DataTemplate x:Key="TagCloudTemplate">
      <TextBlock
        Padding="0,0,10,0"
        FontSize="{Binding Path=ItemCount, Converter={StaticResource CountToFontSizeConverter}}"
        Text="{Binding Path=Name, Mode=Default}"/>
    </DataTemplate>
    
  </UserControl.Resources>
  
  <Grid>

    <ListBox
      x:Name="lstCloud"
      ItemTemplate="{DynamicResource TagCloudTemplate}"
      ScrollViewer.HorizontalScrollBarVisibility="Disabled"
      IsSynchronizedWithCurrentItem="True"
      Style="{DynamicResource TagsListBox}"
      HorizontalAlignment="Stretch"/>

  </Grid>
</UserControl>
